<template>
<xbd-pages-content title="新增站点">
	<template #content>
		<view class="content">
			<ChooseSite :visible.sync="visible" :list="list" @change="changeSite">
				<template>
					<view class="choose-site item" @click="visible = true">
						<view class="left">
							<uni-icons type="location" size="16" color="#BBC0C9"></uni-icons>
							<view class="type">
								{{ address }}
							</view>
						</view>
						<uni-icons type="arrowright" size="16" color="#BBC0C9"></uni-icons>
					</view>
				</template>
			</ChooseSite>
			<view class="item">
				<uni-easyinput prefixIcon="phone" type="text" v-model="value" placeholder="请输入站点联系人手机号"></uni-easyinput>
			</view>
			<button type="default" class="btn" @click="confirm">确认</button>
		</view>
	</template>
	</xbd-pages-content>
</template>

<script>
	import { DeliveryOrder } from '@/api/index.js';
	import ChooseSite from '@/components/deliveryorder/ChooseSite.vue';
	export default {
		data() {
			return {
				id:'',
				address: '请选择站点位置',
				value: '',
				list: [],
				visible: false,
				obj: {}
			};
		},
		components: {
			ChooseSite
		},
		methods: {
			async confirm() {
				const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (Object.keys(this.obj).length < 6) {
					this.$showToast('请选择站点位置');
				} else if (!this.value.length) {
					this.$showToast('请输入手机号');
				} else if (!reg.test(this.value)) {
					this.$showToast('请输入正确格式手机号');
				} else {
					this.obj.station_phone = this.value;
					try{
						this.$showLoading('加载中');
						const res = await DeliveryOrder.addDeliveryStation(this.obj);
						const { success } = res;
						if (success) {
							uni.navigateBack({
								delta: 1
							})
						}
						uni.hideLoading();
					} catch(e) {
						uni.hideLoading();
					}
				}
			},
			changeSite(obj, title) {
				this.address = title;
				this.obj = obj;
			},
			async init() {
				try {
					this.$showLoading('加载中');
					const res = await DeliveryOrder.getBaseDeliveryStation(this.id);
					const { success, data: { list } } = res;
					if (success) {
						this.list = list;
					}
					uni.hideLoading();
				} catch(e) {
					uni.hideLoading();
				}
			}
		},
		onLoad(res) {
			this.id = res.id
			this.init();
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .uni-easyinput__content {
		border: 0;
	}
	::v-deep .uni-easyinput__content-input {
		padding: 0;
		
		font-size: 28rpx;
	}
	::v-deep .uni-icons {
		padding: 0 10rpx 0 0;
	}
	.content {
		padding: 20rpx 40rpx;
		min-height: 361px;
		
		background-color: #FFFFFF;
		
		box-sizing: border-box;
		.choose-site {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			font-size: 28rpx;
		}
		.item {
			padding: 10px 0;
			border-bottom: 1px solid #E8E2E2;
		}
		.left{
			display: flex;
			.type{
				margin-left: 6rpx;
			}
		}
		.btn {
			position: absolute;
			bottom: 70px;
			left: 50%;
			transform: translateX(-50%);
			width: 320rpx;
			height: 34px;
			line-height: 34px;
			text-align: center;
			border-radius: 8rpx;
			
			font-size: 28rpx;
			
			background-color: $uni-color-primary;
			
			color: #FFFFFF;
		}
	}
</style>
